import React from 'react';
// import {Link} from 'react-router-dom'
import { exhibitionLists } from "../http/interface";
import style from '../style/exhibitionList.module.scss'

import searchicon from '../image/search _icon.png'


class exhibitionList extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            list: []
        };

        this.getList = this.getList.bind(this);
        this.goDetail = this.goDetail.bind(this);
        this.goSearch = this.goSearch.bind(this);
    }

    componentDidMount() {
        this.getList()
    }

    getList = async() => {
        try {
          const res = await exhibitionLists({
          });
          if (res.status === 1) {
            this.setState({
                list: res.data
            });
          }
        } catch (error) {
          console.log(error);
        }
    }
    goDetail(id) {
        this.props.history.push(`/exhibition/detail/${id}`)
    }
    goSearch() {
        this.props.history.push('/search')
    }

    render() {
        let list = this.state.list
        return (
            <div className={style.exhibitionList}>
                <div className={style.banner}>
                    <div className={style.tools}>
                        <div className={style.search}>
                            <div className={style.sousuo}>
                                <img src={searchicon} alt=""/>
                            </div>
                            <input 
                                className={style.seaInp}
                                placeholder="搜索展览/展品" 
                                v-model="keyword"
                                onFocus={() => {this.goSearch()}}
                                type="search"/>
                        </div>
                        <div className={style.saoyisao}>

                        </div>
                    </div>
                </div>
                <div className={style.list}>
                    {
                        list.map((item, index) => {
                            return <div key={index} className={style.exhibition} onClick={() => {this.goDetail(item.exhibition_id)}}>
                                <div className={style.image}>
                                    <img src={item.exhibition_img} alt=""/>
                                </div>
                                <p className={style.title}>{item.exhibition_name}</p>
                                <p className={style.pos}>{item.exhibition_address}</p>
                            </div>
                        })
                    }
                </div> 
                <div className={style.nomore}>没有更多了...</div>
            </div>
        )
    }
}

export default exhibitionList;
